<template>
	<div class="group_list">
		<x-header title="团购" class="blues" :left-options="{backText: ''}">
			<a slot="right" style="font-size:.3rem;color:#fff;" @click="goHelp">帮助中心</a>
		</x-header>
		<div class="content">
			<div class="status_tab">
				<tab>
			      <tab-item :selected="selectIndex===0" @on-item-click="getGroupList(1,1)">已上线</tab-item>
			      <tab-item :selected="selectIndex===1" @on-item-click="getGroupList(1,2)">待上线</tab-item>
			      <tab-item :selected="selectIndex===2" @on-item-click="getGroupList(1,3)">已下线</tab-item>
			    </tab>
			</div>
			<div class="goods_lists1" v-show="selectIndex===0" ref="group">
				<div>					
					<div @click.stop="handleCloseMenu" class="goods_list" v-for="(item,index) in onlineList" :key="index" v-if="onlineList.length">
						<div class="goods_list_top">
							<div class="goods_img">
								<img :src="item.face_path_full" alt="" />
							</div>
							<div class="goods_info">
								<h5>
									<p>{{item.title}}</p>
									<p>结束时间:{{ item.end_date }}</p>
								</h5>
								<p>
									<span>团购价</span>
									<span>￥{{item.price}}</span>
									<span>￥{{item.original_price}}</span>
								</p>
							</div>
						</div>
						<div class="goods_list_bottom">
						
								<div class="amounts">
									<div class="amounts_left">
										<img src="../../assets/images/groups/question.png" alt="" />
										<span>近30天浏览量{{ item.sale_count }}</span>
										<span>销量{{item.sale_count}}</span>
									</div>
									<div class="amounts_right" @click.stop="moreOperation(index,$event)">
										<span>更多操作</span>
										<img :class="{open1:is_open1}" src="../../assets/images/groups/arrow.png" alt="" />
									</div>
									<div ref="more" class="shows" :class="{'shows2':zHeight < lHeight}" v-if="index===current">
										<p @click.stop="modifys(item.id)">修改</p>
										<p @click.stop="delays(item.id)">延期项目</p>
										<p @click.stop="downlines(item.id)">申请下线</p>
									</div>
								</div>
								<!--<div class="analysis">
									<img src="../../assets/images/groups/cartoon.png" alt="" />
									<div :class="{backg1:false,backg2:true,backg3:false}">综合分析当前项目折扣为6.0折时可以获得更高销量，建议修改哦！</div>
								</div>-->						
						</div>
					</div>
					<div v-if="hasData">
						<inline-loading></inline-loading>
						<span style="vertical-align:middle;display:inline-block;font-size:14px;">&nbsp;&nbsp;加载中</span>
					</div>
					<p v-if="onlineList.length >= 5">{{dataTip}}</p>
					<div v-if="!onlineList.length" style="margin-top: .4rem;">
						<inline-loading></inline-loading>
						<span style="vertical-align:middle;display:inline-block;font-size:14px;">&nbsp;&nbsp;加载中</span>
					</div>
				</div>	
			</div>
			<div class="goods_lists2" v-show="selectIndex===1">		
				<div class="no_data">
					<img src="../../assets/images/groups/noData.jpg" alt="">
					<p>暂无数据</p>
				</div>							
			</div>
			<div class="goods_lists3" v-show="selectIndex===2">
				<div class="no_data">
					<img src="../../assets/images/groups/noData.jpg" alt="">
					<p>暂无数据</p>
				</div>
			</div>	
			<div class="add_project" @click="goRelease">
				<span>发布项目</span>
				<span>+</span>
			</div>			
		</div>
		<!-- 延期项目 -->
		<div class="delay_dates">
			<x-dialog v-model="showToast">
				<group>
					<datetime :min-year="years" title="延期日期" placeholder="请选择" v-model="minuteListValue" format="YYYY-MM-DD" @on-change="change"></datetime>
				</group>
				<div class="btn">
					<button type="primary" @click="cancels()">取消</button>
					<button type="primary" @click="ensures()">确定延期</button>
				</div>
			</x-dialog>
		</div>
	</div>
</template>

<script>
	import Bscroll from 'better-scroll'
	import {getUrlParam}  from '@/assets/js/getUrlParam'
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie';
	import { XHeader, Tab, TabItem ,InlineLoading, Datetime, Group, XDialog, XButton, Confirm } from 'vux';
	export default {
		name: 'group_list',
		data() {
			return {				
				selectIndex: '', //0-已上线  1-待上线  2-已下线		
				is_open1: false,
				current : '',
				operatList : [
					'查看项目',
					'修改',
					'延期项目',
					'不可用日期',
					'申请下线',
					'分享',
				],
				onlineList : [],
				page       : 1,
				hasData    : false,
				dataTip    : '上拉加载更多',
				noQuest    : true,
				type       : '',
				lHeight    : 252,
				zHeight    : '',
				minuteListValue: '',
				objs: {},
				showToast: false,
				years: 0,
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
			InlineLoading,
			Datetime,
			Group,
			XDialog,
			XButton,
			Confirm
		},
		computed: {

		},
		created() {
			setCookie('bar_index',2);
			let d = new Date();
			this.years = +d.getFullYear();
		},
		methods: {
			getGroupList(page,type){
				if(this.type != type){
					this.noQuest = true
				}
				this.type = type
				let info = {
					userinfo :{
						uid   : getUrlParam('uid') 	 || '',
						token : getUrlParam('token') || ''
					},
					user_product_id : getUrlParam('user_product_id') || '',
					page            : page,
					type            : type || 1,
					pageSize        : 5
				}
				if(!this.noQuest){
					return
				}
				if(page > 1){
					this.hasData = true
					this.noData  = false
				}
				this.$axiosPost('/api/group/groupList',{
					data : JSON.stringify(info)
				}).then( res => {
					if(res && page === 1){
						this.onlineList = res
					}
					if(!res.code && page > 1){
						this.hasData = false
						this.noData  = true
						res.forEach( (item) => {
							this.onlineList.push(item)
						})						
					}
					if(res.code == 403 && page > 1){
						this.$vux.toast.text(res.msg || '已加载全部数据','top')
						this.dataTip = res.msg || '已加载全部数据'
						this.noQuest = false
						this.noData  = true
						this.hasData = false
					}
				})
			},
			//帮助中心
			goHelp(){
				this.$router.push('/customerService');
			},
			//已上线切换
			onItemClick(val){
				this.selectIndex = val;
				this.current = '';
			},
			handleCloseMenu(){
				this.current = '';
			},
			//更多操作
			moreOperation(index,$event){
				//this.is_open1 = !this.is_open1;
				if(this.current === index){
					this.current = ''
					return
				}
				this.current = index
				let mHeight = $event.clientY          //鼠标距离上面的距离
				let oHeight = document.documentElement.clientHeight //可视区域的高度
				this.zHeight = oHeight - mHeight
			},
			//跳转到链接处
			goLink(e){
				this.current = ''
				//this.$router.push()
			},
			//发布项目
			goRelease(){
				this.$router.push('/groupRelease');
			},
			//修改
			modifys(id){
				this.$router.push('/groupModify/'+id);
			},
			//延期
			delays(id){
				this.showToast = true;
				let obj = {
					userinfo: {
						token: getUrlParam('token') || '',
						uid: getUrlParam('uid') || ''
					},
					tuan_info_id: id
				};
				this.objs = obj;
			},
			change (value) {
				this.objs.delay = value;
			},
			//取消
			cancels(){
				this.showToast = false;
				this.minuteListValue = '';
			},
			//确定
			ensures(){
				if(this.minuteListValue == ''){
					this.$vux.alert.show({
						title: '提示',
						content: '请选择延期日期'
					});
					return;
				}
				this.$axiosGet('/api/group/delay',{
					data: JSON.stringify(this.objs)
				}).then(res => {
					if(res.code === 200){
						this.getGroupList(1,this.type);
						this.showToast = false;
						this.current = '';
						this.$vux.toast.show({
							text: res.msg
						});
					}
				})
			},
			//申请下线
			downlines(id){
				let self = this;
				this.$vux.confirm.show({
					title: '提示',
					content: '确定申请下线',
					onCancel () {

					},
					onConfirm () {
						let obj = {
							userinfo: {
								token: getUrlParam('token') || '',
								uid: getUrlParam('uid') || ''
							},
							tuan_info_id: id
						};
						self.$axiosGet('/api/group/offline',{
							data: JSON.stringify(obj)
						}).then(res => {
							if(res.code === 200){
								self.getGroupList(1,self.type);
								self.current = '';
								self.$vux.toast.show({
									text: res.msg
								});
							}
						})
					}
				})
			},
		},
		mounted(){
			this.selectIndex = 0
			this.getGroupList(this.page)
			this.scroll = new Bscroll(this.$refs.group,{
				click : true,
				probeType : 3,
				pullUpLoad: {
				  threshold: -50
				}
			})
					
			this.scroll.on('pullingUp', () => {
				//console.log(this.page)
				this.getGroupList(++this.page)
				this.scroll.finishPullUp()
				this.scroll.refresh()
			})	

		},
		watch:{
			type(){
				this.hasData = false
				this.page = 1
				this.dataTip = '上拉加载更多'
				this.current = ''
				//console.log(this.page)				
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.group_list {
		padding-bottom: .9rem;
		.content {
			.goods_lists1{
				overflow: hidden;
				position: absolute;
				top: 1.76rem;
				left: 0;
				right: 0;
				bottom: .9rem;
				background: #f7f7f7;
				.goods_list{
					background: #fff;
					width: 94.67%;
					margin: 0 auto;
					border-top: .16rem solid #f7f7f7;
					.goods_list_top{
						display: flex;
						width: 92.96%;
						margin: 0 auto;
						border-bottom: 1px solid #f0f0f1;
						padding: .42rem 0 .16rem 0;
						.goods_img{
							img{
								width: 1.24rem;
								height: .88rem;
							}
						}
						.goods_info{
							margin-left: .2rem;
							text-align: left;
							h5{
								font-size: .32rem;
								color: #171717;
								display: flex;
								p:nth-of-type(2){
									color: #000;
									font-weight: 400;
									margin-left: .2rem;
								}
							}
							p{
								font-size: .24rem;
								display: flex;
								align-items: center;
								margin-top: .16rem;
								span:nth-of-type(1){									
									color: #1e1e1e;
								}
								span:nth-of-type(2){								
									color: #ff8400;
									margin: 0 .12rem;
								}
								span:nth-of-type(3){									
									color: #8b8b8b;
									text-decoration: line-through;
								}
							}
						}
					}
					.goods_list_bottom{
						width: 92.96%;
						margin: 0 auto;
						padding: .26rem 0 .36rem 0;
						position: relative;
						.amounts{
							display: flex;
							justify-content: space-between;
							.amounts_left{
								display: flex;
								align-items: center;
								img{
									width: .24rem;
									height: .24rem;
								}
								span{
									font-size: .24rem;
									color: #202020;									
								}
								span:nth-of-type(1){
									margin: 0 .1rem;
								}
							}
							.amounts_right{
								display: flex;
								align-items: center;
								span{
									font-size: .24rem;
									color: #202020;
								}
								img{
									width: .3rem;
									height: .3rem;
									margin-left: .1rem;
								}
								.open1{
									transform: rotate(180deg);
								}
							}
							.shows{
								width: 1.83rem;
								position: absolute;
								right: 0;
								top: .7rem;
								background: #fff;
								z-index: 9999;
								box-shadow:2px 2px 2px #efefef,2px -2px 2px #efefef,-2px 2px 2px #efefef,-2px -2px 2px #efefef;
								p{
									width: 100%;
									height: .84rem;
									line-height: .84rem;
									border-bottom: 1px solid #efefef;
									font-size: .26rem;
									color: #8b8b8b;									
								}
							}
							.shows2{
								width: 1.83rem;
								position: absolute;
								right: 0;
								top: -2.5rem;
								transform: rotate(180deg);
								-webkit-transform: rotate(180deg);
								background: #fff;
								box-shadow:2px 2px 2px #efefef,2px -2px 2px #efefef,-2px 2px 2px #efefef,-2px -2px 2px #efefef;
								z-index: 9999;
								p{
									transform: rotate(-180deg);
									-webkit-transform: rotate(-180deg);
									width: 100%;
									height: .84rem;									
									font-size: .26rem;
									color: #8b8b8b;									
								}
							}
						}
						.analysis{
							display: flex;
							text-align: left;
							margin-top: .32rem;
							img{
								width: .78rem;
								height: .78rem;
							}
							div{
								font-size: .28rem;
								color: #1dbdaa;	
								padding: .2rem .14rem;							
							}
							.backg1{
								background: url('../../assets/images/groups/bubble1.png');
								background-size: 6.1rem .77rem;
							}
							.backg2{
								background: url('../../assets/images/groups/bubble2.png');
								background-size: 6.1rem 1.2rem;
							}
							.backg3{
								background: url('../../assets/images/groups/bubble3.png');
								background-size: 6.1rem 1.47rem;
							}
						}
					}
				}
			}			
			.no_data{
				width: 7.5rem;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				display: flex;
				flex-flow: column;
				justify-content: center;
				align-items: center;
				img{
					width: 1.63rem;
					height: 2.09rem;
				}
				p{
					font-size: .24rem;
					color: #969696;
				}
			}
			.add_project{
				width: 2rem;
				height: .82rem;
				background: #3b2f2f;	
				position: fixed;
				bottom: 1.2rem;
				left: 50%;
				transform: translateX(-50%);	
				z-index: 999;
				display: flex;
				justify-content: center;
				align-items: center;	
				border-radius: .8rem;
				span{
					font-size: .28rem;
					color: #fff;
					margin: 0 .05rem;					
				}
			}
		}
		.delay_dates{
			.btn{
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin: 0 auto;
				height: 2rem;
			}
			button{
				width: 40%;
				height: .88rem;
				font-size: .26rem;
				color: #fff;
				background: #04be02;
				border: none;
				outline: none;
				border-radius: .05rem;
			}
		}
	}
</style>